<template>
	<view>
		<view class="ver" v-if="show">
			<text class="text">LOCK</text>
			<input type="password" class="input" v-model="key" placeholder="key" />
			<button class='button' @click="handleInto">INTO</button>
		</view>
	</view>
</template>

<script setup>
	import {
		onMounted,
		ref
	} from 'vue';

	/**
	 * 密码框
	 */
	const key = ref('')

	/**
	 * 是否需要验证
	 */
	const show = ref(true)

	/**
	 * 固定密码
	 */
	const myKey = 'zhubajie'

	/**
	 * 一天时间的时间戳
	 */
	const oneDayTime = 24 * 60 * 60 * 1000

	/**
	 * 验证方法
	 */
	const ver = () => {
		const verStroage = uni.getStorageSync('ver')
		if (!verStroage) {
			return
		}
		const notTime = new Date().getTime()
		const eTime = new Date(verStroage?.e).getTime()
		const key = verStroage.key
		if (notTime - eTime < oneDayTime && key === myKey) {
			uni.showToast({
				title: '验证成功',
				icon: 'success'
			})
			show.value = false
		}
	}

	/**
	 * 提交验证
	 */
	const handleInto = () => {
		if (key.value === myKey) {
			uni.setStorageSync('ver', {
				key: key.value,
				e: new Date().getTime(),
			})
			ver()
		} else {
			uni.showToast({
				title: '验证失败',
				icon: 'error'
			})
		}
	}

	onMounted(() => {
		ver()
	})
</script>

<style scoped lang="scss">
	.ver {
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		z-index: 9e9;
		font-weight: bold;
		overflow: hidden;

		.text {
			font-size: 48rpx;
			color: #666;
			letter-spacing: 20rpx;
			text-indent: 20rpx;
		}

		.input {
			margin-top: 12rpx;
			border: 2rpx solid #666;
			border-radius: 8rpx;
			text-align: center;
			letter-spacing: 6rpx;
			padding: 12rpx 20rpx;
			cursor: default;
			text-indent: 6rpx;
		}

		.button {
			margin-top: 20rpx;
			letter-spacing: 10rpx;
			text-indent: 10rpx;
		}
	}
</style>